<script setup lang="ts">
import { ref, onMounted } from "vue";
import { AnMap, BasicLayer } from "@anov/echartsmap";

import china from "./china.json";

const mapRef = ref<HTMLElement>();

AnMap.registerMap("china", china);
onMounted(() => {
  const el = mapRef.value;
  const map = new AnMap(el!, { name: "china" });
  const basicLayer = new BasicLayer({
    label: { show: true, color: "#ffffff" },
    tooltip: { show: true, triggerOn: "click" },
  });
  basicLayer.setData([
    {
      name: "内蒙古自治区",
      value: 100,
      a: "1234",
      itemStyle: { color: "#f0f0f0" },
    },
  ]);
  map.addLayer(basicLayer);
  map.render();
});
</script>

<template>
  <div ref="mapRef" class="map"></div>
</template>

<style scoped>
.map {
  width: 100vw;
  height: 100vh;
}
</style>
